<template>
  <!-- 个体工商户table组件 -->
  <div>
    <transition name="el-zoom-in-top">
      <div class="download" v-show="checkboxSelect > 0">
        <i class="el-icon-info"></i>
        共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
        >项
        <span @click="excelDownload">下载信息</span>
        <span style="margin-left: 0" @click="excelDownloads">下载附件</span>
        <em @click="cleanSelection">清空</em>
      </div>
    </transition>
    <el-table
      :data="tableData"
      @selectionChange="downloadWhether"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
      ref="multipleTable"
       @sort-change="sortChange"
    >
      <template v-if="platformId != undefined">
        <el-table-column width="45"> </el-table-column>
      </template>
      <template v-else>
        <el-table-column type="selection" :reserve-selection="true" width="45"> </el-table-column>
      </template>
      <el-table-column prop="name" sortable="custom" label="姓名"> </el-table-column>
      <el-table-column prop="idcard" min-width="150" sortable="custom" label="身份证号"> </el-table-column>
      <el-table-column prop="phone" min-width="120" sortable="custom" label="联系电话"> </el-table-column>
      <el-table-column prop="username" min-width="120" sortable="custom" label="登录账号"> </el-table-column>
      <template v-if="platformId == undefined">
        <el-table-column prop="platformName" min-width="150" sortable="custom" label="用工平台">
        </el-table-column>
      </template>
      <el-table-column sortable="custom" min-width="160" prop="createTime" align="center" label="注册时间">
        <template #default="item">
        {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isBusiness"
        align="center"
        label="是否完成注册"
        min-width="120"
      >
        <template #default="item">
          {{ item.row.step == 4 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="bankName" min-width="100" label="银行名称"> </el-table-column>
      <el-table-column prop="bankNo" min-width="160" label="账号"> </el-table-column>
      <el-table-column prop="bankPhone" min-width="110" label="预留手机号"> </el-table-column>
      <el-table-column prop="bankCity" min-width="80" label="开户省"> </el-table-column>
      <el-table-column prop="bankProvince" min-width="80" label="开户市"> </el-table-column>
      <el-table-column prop="phone" align="center" label="授权委托书" width="120">
        <template #default="item">
          <span v-if="item.row.authAgreementUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.authAgreementUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&2">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="平台协议书" width="120">
        <template #default="item">
          <span v-if="item.row.platformAgreementUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.platformAgreementUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&1">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="意愿视频" width="120">
        <template #default="item">
          <span v-if="item.row.wishVideoUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openVideo(item.row.wishVideoUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&4">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column prop="isBusiness" min-width="120" align="center" label="是否办理个体">
        <template #default="item">
          {{ item.row.isBusiness == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="caozuo"
        label="操作"
        width="400"
        class-name="editor"
      >
        <template #default="item">
          <router-link
            :to="{ path: '/serviceDel', query: { id: item.row.id } }"
          >
            <el-button type="text">详情</el-button>
          </router-link>
          <el-button type="text" @click="againAgreementAlert(item.row)">重新签署协议</el-button>
          <el-button type="text" v-if="item.row.redoStatus&4" @click="againAgreement(item.row.id, -4)">取消重新录制意愿视频</el-button>
          <el-button type="text" v-else @click="againAgreement(item.row.id, 4)">重新录制意愿视频</el-button>
          <el-button type="text" v-if="item.row.redoStatus&8" @click="againAgreement(item.row.id, -8)">取消重新上传身份证</el-button>
          <el-button type="text" v-else @click="againAgreement(item.row.id, 8)">重新上传身份证</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableData.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="arrPage"
      :page-size="selectPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="签署协议"
      v-model="againAgreementVisible"
      width="420px">
        <div class="againAgreement-box">
          <button class="againAgreement-button" v-if="selfMode == 1" @click="againAgreement(serviceId, agreementStatus)" type="button">{{agreementText}}</button>
          <button class="againAgreement-button" @click="againAgreement(serviceId, platformStatus)" type="button">{{platformText}}</button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["search", "platformId", "processStatus"],
  data() {
    return {
      selfMode: 1,
      serviceId: 0,
      agreementText: "重新签署授权书",
      agreementStatus: 2,
      platformText: "重新签署平台协议书",
      platformStatus: 1,
      againAgreementVisible: false,
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      tableData: [],
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页条数
      checkboxSelect: 0, // 选中条数
      dwonloadList: [], // 选中的数据
    };
  },
  mounted() {
    if (this.platformId) {
      this.getplatformData();
    } else {
      this.getTableData();
    }
  },
  methods: {
    getTableData() {
      // 获取列表信息
      let processStatus = this.processStatus
      if(processStatus == undefined) {
        processStatus = 0
      }
      this.$http({
        url: "/api/sevicer/selectSevcierList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: this.search,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
          processStatus: processStatus
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getplatformData() {
      // 灵活用功详情获取服务者列表
      this.$http({
        url: "/api/platform/selectSevicerInfoByPlatform?platformId=",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          platformId: this.platformId,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    openVideo(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      }).catch(err => {
        console.log(err)
      })
    },
    againAgreementAlert(d) {
      // 重新签署协议
      this.againAgreementVisible = true
      if(d.redoStatus&2) {
        this.agreementText = '取消重新签署授权书'
        this.agreementStatus = -2
      }
      if(d.redoStatus&1) {
        this.platformText = '取消重新签署平台协议书'
        this.platformStatus = -1
      }
      this.serviceId = d.id
    },
    againAgreement(id, status) {
      // 更改意愿视频 协议状态 是否需要更新
      this.$http({
        url: "/api/sevicer/updateRedoStatus",
        method: "post",
        params: {
          id: id,
          redoStatus: status
        },
      }).then((data) => {
        if(data.code == 0) {
          this.$message.success("操作成功")
          this.againAgreementVisible = false
          if (this.platformId) {
            this.getplatformData();
          } else {
            this.getTableData();
          }
        }
      });
    },
    openVideos(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      })
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      if (this.platformId) {
        this.getplatformData();
      } else {
        this.getTableData();
      }
    },
    handleSelectionChange() {},
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    sortChange(d) {
				// 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "platformName" || d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      if (this.platformId) {
        this.getplatformData();
      } else {
        this.getTableData();
      }
    },
    excelDownload() {
      // 下载信息
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("list", this.dwonloadList[i].id);
      }
      axios({
        method: "POST",
        url: "/api/sevicer/sevicerExcel",
        data: checkSelect,
        responseType: "blob",
        headers: {
          Authorization: localStorage.getItem("hegui_token")
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download = "服务者信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    excelDownloads() {
      let loginUserName = localStorage.getItem("hegui_username");
      // 下载附件
      let checkSelect = new FormData();
      // let getTime = new Date().getTime()
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("idList", this.dwonloadList[i].id);
      }
      checkSelect.append("fileRes", "10001");
      checkSelect.append("loginUserName", loginUserName);
      checkSelect.append("fileName", "服务者信息附件" + this.format("yyyyMMddhhmmss", new Date()));
      checkSelect.append("excelFileName", "服务者信息附件"+ this.format("yyyyMMddhhmmss", new Date()));
      axios({
        method: "POST",
        url: "/api/download/downloadSevicerAnnex",
        data: checkSelect,
        headers: {
					'Content-Type': 'application/json',
          Authorization: localStorage.getItem("hegui_token")
				}
      })
        .then(() => {
          this.$message.success("已添加至下载列表，请到下载列表中查看下载");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.dwonloadList = d;
    },
    openUrl(url) {
      // 打开新窗口查看协议
      this.$http({
        url: "/api/quick/server/consumer/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
    },
  },
};
</script>

<style>
.open-crm {
  font-size: 12px;
}
</style>
<style lang="scss" scoped>
.againAgreement-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  .againAgreement-button {
    padding: 8px 16px;
    background-color: #326CF0;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>
